<template>
  <div>
    <!-- 气瓶回收详情 -->
    <el-drawer
      :visible.sync="visible"
      :with-header="false"
      direction="rtl"
      @closed="reset"
    >
      <div class="title">
        <div class="title-text">气瓶回收详情({{ detailInfo.billCode }})</div>
        <el-tag class="tag" :type="billStatusFormat(detailInfo.billStatus)">{{ formatColumnMap(billStatusMap, "value", detailInfo.billStatus, "desc") }}</el-tag>
      </div>
      <div class="popups-info">
        <div class="form">
          <el-collapse v-model="activeNames" class="collapse">
            <el-collapse-item title="回收基础信息" :name="1">
              <el-descriptions size="medium" :label-style="{ 'white-space': 'nowrap' }">
                <el-descriptions-item label="回收人">{{ detailInfo.targetUser }}</el-descriptions-item>
                <el-descriptions-item label="客户编号">{{ detailInfo.csmCode }}</el-descriptions-item>
                <el-descriptions-item label="客户名称">{{ detailInfo.csmName }}</el-descriptions-item>
                <el-descriptions-item label="客户类型">{{ formatColumnMap(customerTypeMap, "value", detailInfo.csmType, "desc") }}</el-descriptions-item>
                <el-descriptions-item span="2" label="地址">{{ detailInfo.csmAddress }}</el-descriptions-item>
                <el-descriptions-item label="备注">{{ detailInfo.remark }}</el-descriptions-item>
              </el-descriptions>
            </el-collapse-item>
            <el-collapse-item title="回收气瓶信息" :name="2">
              <lb-table
                ref="lbTable"
                border
                highlight-current-row
                element-loading-text="加载中"
                :column="column"
                :data="tableData.data.rows"
                :pagination="false"
                align="center"
              />
              <div class="summary-row">
                回收合计金额：{{ detailInfo.reclTotalAmount !== undefined ? detailInfo.reclTotalAmount.toFixed(2) : '' }}，回收数量：{{ detailInfo.totalNumber }}，回收残液重量:{{ detailInfo.reclTotalWeight }}kg
              </div>
            </el-collapse-item>
            <el-collapse-item v-if="detailInfo.billStatus === -1" title="作废信息" :name="3">
              <el-descriptions size="medium" :label-style="{ 'white-space': 'nowrap' }">
                <el-descriptions-item label="作废人">{{ detailInfo.cancelUserName }}</el-descriptions-item>
                <el-descriptions-item label="作废时间">{{ parseTime(detailInfo.cancelTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</el-descriptions-item>
              </el-descriptions>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <div class="bottom">
        <div class="btn-group">
          <el-button @click="visible=false">关闭</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

  <script>
  import { querySubTypeMap, cylinderRecoveryDetail, queryMap } from '@/api'
  import { formatColumnMap, parseTime } from '@/utils'
  import { mergeAsyncFunc } from '@/utils/mergeAsyncFunc'

  export default {
    name: 'CylinderRecoveryDetail',
    data() {
      return {
        visible: false,
        parseTime,
        detailInfo: {},
        activeNames: [1, 2, 3],
        customerTypeMap: [],
        billStatusMap: [],
        billTypeMap: [],
        recycleOverFlagMap: [{
          desc: '是',
          value: 1
        }, {
          desc: '否',
          value: 2
        }],
        recycleScrapFlagMap: [{
          desc: '是',
          value: 1
        }, {
          desc: '否',
          value: 2
        }],
        tableData: {
          data: {
            rows: []
          }
        }
      }
    },
    computed: {
      column() {
        // 公共列
        const commonColumn = [
          {
            prop: 'billType',
            label: '回收类型',
            minWidth: 120,
            render: (h, { row }) => <span>{ this.formatColumnMap(this.billTypeMap, 'value', this.detailInfo.billType, 'desc') }</span>
          },
          {
            prop: 'chipCode',
            label: '气瓶条码',
            minWidth: 120
          },
          {
            prop: 'bottleCodes',
            label: '气瓶编码',
            minWidth: 120
          },
          {
            prop: 'goodsName',
            label: '商品名称',
            minWidth: 120
          },
          {
            prop: 'amount',
            label: '回收总金额',
            minWidth: 120,
            render: (h, { row }) => <span>{ row.amount.toFixed(2) }</span>
          }
        ]
        // 仅退瓶相关列
        const column1 = [
          {
            prop: 'goodsYear',
            label: '气瓶年份',
            width: 120
          },
          {
            prop: 'recycleOverFlag',
            label: '是否超期未检',
            width: 120,
            render: (h, { row }) => <span>{ this.formatColumnMap(this.recycleOverFlagMap, 'value', row.recycleOverFlag, 'desc') }</span>
          },
          {
            prop: 'recyclePriceOver',
            label: '回收单价（超检）',
            width: 140,
            render: (h, { row }) => <span>{ row.recyclePriceOver.toFixed(2) }</span>
          },
          {
            prop: 'recycleScrapFlag',
            label: '是否报废',
            width: 120,
            render: (h, { row }) => <span>{ this.formatColumnMap(this.recycleScrapFlagMap, 'value', row.recycleScrapFlag, 'desc') }</span>
          },
          {
            prop: 'recyclePriceScrap',
            label: '回收单价（报废）',
            width: 140,
            render: (h, { row }) => <span>{ row.recyclePriceScrap.toFixed(2) }</span>
          },
          {
            prop: 'recycleAmount',
            label: '回收气瓶金额',
            width: 120,
            render: (h, { row }) => <span>{ row.recycleAmount.toFixed(2) }</span>
          }
        ]
        // 仅退残相关列
        const column2 = [
          {
            prop: 'tare',
            label: '皮重',
            width: 120
          },
          {
            prop: 'grossWeight',
            label: '毛重'
          },
          {
            prop: 'netWeight',
            label: '净重',
            width: 120
          },
          {
            prop: 'price',
            label: '残液单价',
            width: 120,
            render: (h, { row }) => <span>{ row.price.toFixed(2) }</span>
          },
          {
            prop: 'residualAmount',
            label: '残液总价',
            width: 120,
            render: (h, { row }) => <span>{ row.residualAmount.toFixed(2) }</span>
          }
        ]
        if (this.detailInfo.billType === 1) {
          commonColumn.splice(-1, 0, ...column1)
        }
        if (this.detailInfo.billType === 2) {
          commonColumn.splice(-1, 0, ...column2)
        }
        if (this.detailInfo.billType === 3) {
          commonColumn.splice(-1, 0, ...column1, ...column2)
        }
        return commonColumn
      }
    },
    methods: {
      formatColumnMap,
      async open(temp) {
        await this.queryOptionsMap()
        const res1 = await querySubTypeMap({ })
        this.subTypeAllList = res1.data
        // 请求接口
        const res = await cylinderRecoveryDetail({
          billCode: temp.billCode,
          depositId: temp.depositId,
          depStatus: temp.depStatus
        })
        this.detailInfo = res.data
        this.tableData.data.rows = res.data.recycleGoodsList || []
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
        })
      },
      // 查询枚举
      async queryOptionsMap() {
        const [res1, res2, res3] = await Promise.all([
          mergeAsyncFunc(queryMap, { enumName: 'CustomerType' }),
          mergeAsyncFunc(queryMap, { enumName: 'RecycleBillStatus' }),
          mergeAsyncFunc(queryMap, { enumName: 'RecycleBillType' })
        ])
        this.customerTypeMap = res1.data
        this.billStatusMap = res2.data
        this.billTypeMap = res3.data
      },
      // 颜色
      billStatusFormat(val) {
        var typeObj = {
          '-1': 'danger', // 作废
          '4': 'default' // 正常
        }
        return typeObj[val]
      },
      reset() {

      }
    }
  }
  </script>

  <style lang="scss" scoped>
    /deep/.el-drawer {
      width: 75% !important;
    }
    /deep/ .el-descriptions-item__content:not(.descFullContent) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .title {
      display: flex;
      padding: 20px 20px 0 20px;
      margin-bottom: 20px;
      .title-text {
        line-height: 25px;
      }
      .tag {
        margin: 0 10px;
      }
    }
    .popups-info {
      display: flex;
      justify-content: space-between;
      height: calc(100vh - 140px);
      padding: 0 20px;
      overflow-y: auto;
      flex-wrap: wrap;
      .form {
        width: 100%;
        /deep/ .el-collapse-item__content {
          padding-bottom: 10px;
        }
        /deep/ .el-collapse-item__header {
          font-size: 14px;
          font-weight: 700;
          color: #38BDBD;
        }
        .image {
          width: 200px;
          height: 120px;
          margin-right: 10px;
        }
      }
      .lb-table {
        overflow: auto;
        overflow-y: auto;
      }
    }
    .bottom {
      position: fixed;
      bottom: 0;
      z-index: 99;
      width: 80%;
      height: 55px;
      background: white;
      border: 2px solid #DCDFE6;
      .btn-group {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        margin-left: 10px;
        .btns {
          display: flex;
          margin-left: 15px;
        }
      }
    }
    /deep/ .el-descriptions .is-bordered {
      table-layout: fixed;
    }
    .summary-row {
      margin-top: 10px;
      font-size: 16px;
      font-weight: bold;
    }
  </style>
